<template>
	<view class="wrapper bg-linear">
		<view v-for="(item,index) in gossips" :key="index" class=" bg-color shadow1 border-r-10 m-b-12"
			style="padding: 50rpx 30rpx;">
			<view class="flex-s-c" style="padding-bottom: 40rpx;">
				<view><van-image width="100rpx" height="100rpx" round :src="item.icon" /></view>
				<view style="padding-left: 10px;">
					<view class="t-16 t-bold p-b-8">{{item.name}}</view>
					<view class="t-14 color4">{{item.time}}</view>
				</view>
			</view>
			<view class="t-16">{{item.message}}</view>
			<view>
				<van-grid column-num="3" :border="false">
					<van-grid-item use-slot v-for="(imgItem,imgIndex) in item.imgs" :key="imgIndex">
						<van-image width="180rpx" height="180rpx" radius="10px" :src="imgItem" />
					</van-grid-item>
				</van-grid>
			</view>
			<viwe>
				<van-cell :title="item.address" :border="false">
					<view slot="icon">
						<van-icon name="location" color="#3c91ff" size="30rpx" />
					</view>
					<view class="flex-e-c">
						<van-icon name="comment" color="#3c91ff" size="42rpx" />
						<view class="t-16 color3 " style="padding-left: 3px;">
							{{item.comment}}
						</view>
					</view>
					<view slot="right-icon" class="p-l-12">
						<view class="flex-e-c">
							<van-icon name="like" color="#e5404f" size="42rpx" v-if="item.like" />
							<van-icon name="like-o" size="42rpx" v-else />
							<view class="t-16 color3" style="padding-left: 3px;">
								{{item.like}}
							</view>
						</view>
					</view>
				</van-cell>
			</viwe>
		</view>
		<view class="post-button">
			<van-image width="160rpx" height="160rpx" src="../../../static/image/post-button.png" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "ppl-gossip",
		props: {
			gossips: Array
		},
		data() {
			return {

			};
		}
	}
</script>

<style scoped>
	.post-button{
		position: fixed;
		right: 15px;
		bottom: 100px;
	}

</style>